<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta charset="utf-8">
	<title>后台用户管理</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../layui/css/layui.css" media="all">
	<style>
		.blogUser-con .layui-table-view {
			border: none;
		}
		
		.blogUser-con .layui-table-box {
			margin-top: 10px;
		}
		
		.blogUser-con {
			padding: 0 15px 15px 15px;
			margin-bottom:50px;
		}
		.blogUser-con  .layui-table-tool-self{
			display:none;
		}
		.blogUser-con .not_border_left {
			border-left: none !important;
		}
		
		.blogUser-con .blogUser dl dd.layui-this {
			background-color: #1E9FFF !important;
		}
		
		.blogUser-con .hide {
			display: none;
		}
		
		.blogUser-con .show {
			display: block;
		}
		
		.blogUser-con .btn_size {
			height: 28px !important;
			line-height: 28px !important;
		}
		
		.blogUser-con .layui-table-body table tbody .layui-table-hover {
			background: #fffdd3 !important;
		}
		
		.blogUser-con .layui-table-body table tbody .layui-table-click {
			background: #fdef9b !important;
		}
		
		.blogUser-con .layui-table, .layui-table-view {
			border: none;
			margin-top: 0;
		}
		
		#add-AdminUser {
			display: none;
			z-index: 999 !important;
		}
		
		#add-AdminUser .artTypeLayer {
			width: 90%;
			margin-left: auto;
			margin-right: auto;
			padding-top: 20px;
		}
		.adminuserdetail{
			padding:20px;
			display: none;
		}
		.adminuserdetail table tr td{
			padding: 15px;text-align: center;
		}
		.adminuserdetail .tdbck{
			background: #f2f2f2;
			width: 30%;
		}
	</style>
</head>
<body>

	<div class="blogUser-con">
		<blockquote class="layui-elem-quote not_border_left">
			<form class="layui-form" action="">
			  	<div class="layui-input-inline">
					<input type="text" name="queryrealname" id="queryrealname" placeholder="请输入真实姓名" class="layui-input" autocomplete="off">
			    </div>
			    <div class="layui-inline">
	     	   		<select name="queryroleid" id="queryroleid" lay-filter="queryroleid">
						  <option value="00">请选择用户类型</option>
					</select> 
			    </div>
			    <div class="layui-inline">
	     	   		<button id="btnselfrontinfo" type="button" class="layui-btn layui-bg-blue">查询</button>
			    </div>
				<button type="button" class="layui-btn layui-bg-blue" id="addAdminUser" lay-event="addAdminUser" lay-filter="addAdminUser" style="margin-left: 10px;">新增用户</button>
			</form>
		</blockquote>
		
		<!-- 操作模块开始 -->
		<!-- <div id="barDemo" style="display: none;">
			<button class="layui-btn layui-btn-xs" lay-event="seladminuser">查看</button>
			<button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</button>
		</div> -->
		
		
		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-xs" id="edit" lay-event="edit">编辑</a>
			<a class="layui-btn layui-btn-danger  layui-btn-xs" lay-event="delete">删除</a>
		</script>
		
		<!-- 操作模块结束 -->

		<!-- 表格开始 -->
		<table class="layui-hide" name="adminUser" id="adminUser" lay-filter="adminUser"></table>
		<!-- 表格结束 -->
		
		<!-- 弹出新增管理员用户对话框 -->
		<div id="add-AdminUser"> <!-- div必须要被定义为display:none样式  -->
			<div class="artTypeLayer">
				<form class="layui-form" action="">
					<div class="layui-form-item">
						<label class="layui-form-label">用户名:</label>
						<div class="layui-input-block">
							<input type="text" name="userid" id="userid" lay-verify="userid" autocomplete="off" placeholder="请输入管理员用户名" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">真实姓名:</label>
						<div class="layui-input-block">
							<input type="text" name="realname" id="realname" autocomplete="off" placeholder="请输入真实姓名" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">联系电话:</label>
						<div class="layui-input-block">
							<input type="text" name="mobile" id="mobile" autocomplete="off" placeholder="请输入联系电话" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">登录密码:</label>
						<div class="layui-input-block">
							<input type="password" name="pwd" id="pwd" autocomplete="off" placeholder="请输入登录密码" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">再次确认登录密码:</label>
						<div class="layui-input-block">
							<input type="password" name="confirmpwd" id="confirmpwd" autocomplete="off" placeholder="请再次输入登录密码" class="layui-input">
						</div>
					</div>
				    <div class="layui-form-item">
				      <label class="layui-form-label">用户类型:</label>
				      <div class="layui-input-block">
				       	<select id="userRole">
						  <option value="00">请选择用户类型</option>
						</select> 
				      </div>
				    </div>
				</form>
			</div>
		</div>
		<!-- 弹出新增管理员用户对话框结束 -->
	</div>
	<script src="../js/jquery-3.3.1.js" charset="utf-8"></script>
	<script src="../layui/layui.js" charset="utf-8"></script>
	<script src="../js/loadselect.js" charset="utf-8"></script>
	<script src="../lib/md5.js" charset="utf-8"></script>
	<script src="../lib/systempublickey.js" charset="utf-8"></script>
	
	<script>
	layui.use([ 'table', 'form', 'layer', 'laydate', 'laytpl', 'element' ], function() {
		var table = layui.table, form = layui.form, 
			layer = layui.layer, $ = layui.jquery,
			laydate = layui.laydate, laytpl = layui.laytpl,
			element = layui.element;
	
		//调用方法加载select管理员角色
		loadAdminRole("queryroleid",form); 
		
		/*加载表格*/
		table.render({
			elem : '#adminUser',
			id:'adminUser',
			url : '../admin/getadminuserlist',
			title : '后台管理员用户数据表',
			height: "full-160",
			skin : 'line',
			even : true,
			cols : [ 
			     [ {
					field : 'userid',
					align : 'center',
					title : '用户名',
					
				}, {
					field : 'realname',
					align : 'center',
					title : '真实姓名',
					width : 100,
				}, {
					field : 'password',
					title : '密码',
					align : 'center',
					width : 100,
					hide : true
				},{
					field : 'createtime',
					align : 'center',
					title : '创建时间',
					width : 370,
				},{
					field : 'roleId',
					align : 'center',
					title : '用户角色编号',
					width:50,
					hide : true
				},{
					field : 'name',
					align : 'center',
					title : '用户角色',
					width : 100,
				},{
					field : 'description',
					align : 'center',
					title : '角色描述',
					width : 370,
				},{
					title : '操作',
					toolbar : '#barDemo',
					align : 'center'
				} ] 
			 ],
			 page: {
					layout: ['prev', 'page', 'next', 'skip', 'count', 'limit'],
					groups: 5,
					limit: 10,
					limits: [10, 20, 30, 40, 50],
					theme: '#1E9FFF',						
			 },
		});
		/*加载表格结束*/
		
		/* 点击查询对网站用户进行筛选 */
		$("#btnselfrontinfo").click(function(){
			//alert("1");
			querylist();//调用局部刷新
			
		});
		
		function querylist(){
				var realname=$("#queryrealname").val();
				var roleid =$("#queryroleid").val();
				var param = '?realname='+realname+'&roleid='+roleid;
				table.render({
					elem : '#adminUser',
					id:'adminUser',
					url : '../admin/getadminuserlist'+param,
					title : '后台管理员用户数据表',
					height: "full-160",
					skin : 'line',
					even : true,
					cols : [ 
					      [ {
							field : 'userid',
							align : 'center',
							title : '用户名',
							
						}, {
							field : 'realname',
							align : 'center',
							title : '真实姓名',
							width : 100,
						}, {
							field : 'password',
							title : '密码',
							align : 'center',
							width : 170,
							hide : true
						},{
							field : 'createtime',
							align : 'center',
							title : '创建时间',
							width : 370,
						},{
							field : 'roleId',
							align : 'center',
							title : '用户角色编号',
							hide : true
						},{
							field : 'name',
							align : 'center',
							title : '用户角色',
							width : 100,
						},{
							field : 'description',
							align : 'center',
							title : '角色描述',
							width : 370,
						},{
							title : '操作',
							toolbar : '#barDemo',
							align : 'center'
						} ] 
					 ],
					 page: {
							layout: ['prev', 'page', 'next', 'skip', 'count', 'limit'],
							groups: 5,
							limit: 10,
							limits: [10, 20, 30, 40, 50],
							theme: '#1E9FFF',						
					 },
				});
			}
		/*点击查询加载表格数据结束*/
		
		/*将添加的所有input变为空----开始*/
		function clearinp(){
			$("#userid").val("");
			$("#realname").val("");
			$("#pwd").val("");	
			$('#confirmpwd').val("");
			$('#mobile').val("");
			$("#userRole").val("0");
			form.render("select");
		}
		/*将添加的所有input变为空----结束*/
		
		/*
		 *添加一个管理员用户
		*/
		$("#addAdminUser").click(function(){
			loadAdminRole("userRole",form);
				
			layer.open({
				type : 1,
				title : '管理员用户添加',
				area : [ '540px', '575px' ],
				shade : 0.4,
				content : $('#add-AdminUser'),
				btn : [ '保存', '返回' ],
				yes : function() {
					//获取
					var userid = $("#userid").val().trim();
					var realname = $("#realname").val().trim();
					var pwd = $("#pwd").val().trim();	
					var confirmpwd = $('#confirmpwd').val().trim();
					var mobile = $('#mobile').val().trim();
					var userRole = $('#userRole').val().trim();
					if(userid == "") {
						layer.tips('不能为空', '#userid');
						return;
					} 
					if(realname==""){
						layer.tips('不能为空', '#realname');
						return;
					}
					if(pwd==""){
						layer.tips('不能为空', '#pwd');
						return;
					}
					if(confirmpwd==""){
						layer.tips('不能为空', '#confirmpwd');
						return;
					}
					if(confirmpwd != pwd) {
						layer.tips('密码不一致', '#confirmpwd');
						return;
					} 
					if(userRole == '00') {
						layer.tips('请选择用户角色', $("#userRole").parent());
						return;
					}
					
					/* 用MD5将密码做加密处理 */
					var enpwd = hex_md5(fix(userid,pwd));
					$("#user_password").val(enpwd);
					//alert(enpwd);
					
					var userRole =$("#userRole").val();
					var para = "?userid="+userid+"&realname="+realname+"&pwd="+enpwd+"&mobile="+mobile+"&roleid="+userRole;
					
					//构建参数 
					var obj = {
						"userid":userid,
						"mobile":mobile,
						"realname":realname,
						"pwd":pwd,
						"roleid":userRole
						};
						
					//alert(param)
					$.ajax({
						url : "../admin/addadminuser"+para,
						type : "POST",
						/* data : obj, //直接传对象参数  */
						dataType : 'json',
				
						success : function(data) {
							if (data.code == 10001) {
								layer.confirm(data.msg, {
								  btn: ['确定','取消'],
								  icon:1
								}, function(){
										querylist();//调用局部刷新
										clearinp();//清空添加填入input的值
										layer.close(layer.index);
										parent.layer.close(index); //再执行关闭 
										table.reload("adminUser", { //此处是上文提到的 初始化标识id
							                where: {
	
							                }
							            } );	
								}, function(){
									querylist();
									layer.closeAll();
								});
							}else{
								layer.confirm(data.msg, {
								  btn: ['确定'],
								  icon:2
								});
							}
						},
						error : function() {}
					});						
				},
				btn2 : function() {
					clearinp();//清空添加填入input的值
					layer.closeAll();
				}
			});
		});
		
		//table监听工具条
		table.on('tool(adminUser)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
		  var data = obj.data; //获得当前行数据
		  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
		  var tr = obj.tr; //获得当前行 tr 的DOM对象
		 
		  if(layEvent === 'delete'){ //删除
		    layer.confirm('真的删除行么', function(index){
		      obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
		      layer.close(index);
		      //向服务端发送删除指令
		      	$.post("../admin/deleteadminuser",{userid:obj.data.userid},function(flag){
	    			if(flag){
	    				layer.msg("刪除成功",{icon:6}); //表格刷新
				        table.reload('test'); //重载表格	
	    			}else{
	    				layer.msg("刪除失敗",{icon:5});
	    			}
		    	});
		    });
		  } else if(layEvent === 'edit'){ //编辑
		    //do something
		   //脚本编辑弹出层
	             var name = encodeURIComponent(data.toolName);
	             //alert(name);
	             layer.open({
		               type: 2,
		               title: '修改管理员用户信息',
		               shadeClose: true,
		               shade: 0.5,
		               closeBtn:'1',//右上角xx关闭
		               area: ['400px','500px'],
		               content:'editAdminUser.jsp',
		               btn: ['确定', '取消'],
		               yes: function(index, layero){
			           //点击确认触发 iframe 内容中的按钮提交
			           var submit = layero.find('iframe').contents().find("#layuiadmin-app-form-submit");
			           submit.click();
			        },
		               success : function(layero, index){
				            var body = layui.layer.getChildFrame('body', index);
				            if(layEvent === 'edit'){
				                // 取到弹出层里的元素，并把编辑的内容放进去
				                body.find("#userid").val(obj.data.userid);  //将选中的数据的id传到编辑页面的隐藏域，便于根据ID修改数据
				                body.find("#realname").val(obj.data.realname); 
				                body.find("#mobile").val(obj.data.mobile);
				                //body.find("#pwd").val(obj.data.password);
				                body.find("#userRole").val(obj.data.roleId);
				            }
				            setTimeout(function(){
								parent.layui.table.reload('LAY-app-content-list'); //重载表格
		     					parent.layer.close(index); //再执行关闭 
								parent.layui.table.reload('adminUser'); //重载表格
							},1*1000)
				        }
	             });
	              //同步更新缓存对应的值
		    obj.update({
		      username: '123'
		      ,title: 'xxx'
		    });
		  }
	  });

});
		
	</script>
</body>
</html>